<template>
  <div class="category">
    <page-search
      :search-config="searchConfig"
      @resetClick="handleSearchReset"
      @queryClick="handleSearchQuery"
    />
    <page-content
      :content-config="contentConfig"
      ref="contentRef"
      @createRecord="handleCreateRecord"
      @editRecord="handleEditRecord"
    >
    </page-content>
    <page-modal ref="modalRef" :modal-config="modalConfig" />
  </div>
</template>

<script setup lang="ts">
import searchConfig from '@/views/main/product/category/config/search.config';
import contentConfig from '@/views/main/product/category/config/content.config';
import modalConfig from '@/views/main/product/category/config/modal.config';
import usePageContent from '@/hooks/usePageContent';
import usePageModal from '@/hooks/usePageModal';

const { contentRef, handleSearchReset, handleSearchQuery } = usePageContent();
const { modalRef, handleCreateRecord, handleEditRecord } = usePageModal();
</script>

<style scoped lang="scss">
.category {
}
</style>
